<template>
  <div>
    <div class="mokuai1">
      <h3>插槽父组件的内容：</h3>
      <p>如何查看自己的vue版本是看package.json文件里面，现在是2.6.11版本</p>
      <p>父传子，子传父是传递的是数据，而插槽传递是结构</p>
      <soldchacao>这是 父传子的插槽传递给子组件，传递是结构</soldchacao>
    </div>
    <div class="mokuai1">
      <h3>具名插槽</h3>
      <p>使用方法就是slot加上名字</p>

    <soldchacao>
        <template v-slot:header>
          <h4>这是父组件插槽的头部</h4>
        </template>
        <template v-slot:footer>
          <h4>这是父组件插槽的尾部</h4>
        </template>
      </soldchacao>
    </div>
    <div class="mokuai1">
      <h3>作用域</h3>
      <p>使用方法就是子组件传过来msg但是父组件用data接收,然后data.msg</p>

      <soldchacao>
        <template v-slot:header>
          <h4>这是父组件插槽的头部</h4>
        </template>
    
        <template v-slot:footer='datas'>
          <h4>这是父组件插槽的尾部{{datas.msg}}</h4>
        </template>
      </soldchacao>
      
    </div>
  </div>
</template>

<script>
import soldchacao from "@/components/soldchacao.vue";
export default {
  data() {
    return {};
  },
  components: {
    soldchacao
  }
};
</script>

<style>
.mokuai1 {
  border: 1px solid red;
  margin-bottom: 30px;
}
.colorred {
  color: red;
}
h2 {
  color: aqua;
}
h3 {
  color: brown;
}
.mokuai2 {
  border: 1px solid aqua;
  margin-bottom: 30px;
}
</style>